<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>欢迎您~</title>
    <link rel="stylesheet" href="../static/mdui/css/mdui.css" th:href="@{/static/mdui/css/mdui.css}"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*video{*/
        /*    height: 100%;*/
        /*    width: 100%;*/
        /*    object-fit: fill;*/
        /*    position: absolute;*/
        /*    right: 0px;*/
        /*    bottom: 0px;*/
        /*    z-index:-99;*/
        /*}*/
        body{
            width: 100%;
            height: 100%;
            position: relative;
            background-image: url(http://qlwdwvwug.hn-bkt.clouddn.com/bg.jpg);
            background-position: center top;
            background-size: cover;
            z-index: 1;
        }
            #login_frame{
            z-index: 2;
            width: 500px;
            height: 350px;
            padding: 15px;
            position:absolute;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: 175px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            border-radius: 15px;
            overflow: hidden;
            box-sizing: border-box;
        }
        #login_frame:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-filter: blur(20px);
        /*模糊*/
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
            z-index: -3;
            margin: -30px;
            background-image: url(http://qlwdwvwug.hn-bkt.clouddn.com/bg.jpg);
            /*filter:alpha(opacity=50);*/
            /*-moz-opacity:0.5;*/
            /*-khtml-opacity: 0.5;*/
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body>
<div class="backgroud">
<!--<video autoplay loop muted src="http://qlwdwvwug.hn-bkt.clouddn.com/wall.webm"></video>&lt;!&ndash; 视频背景图就这一行 &ndash;&gt;-->
    <div id="login_frame">
        <h2 style="margin: 20px 0 20px 120px;"><i class="mdui-icon material-icons">&#xe80c;</i>&nbsp;&nbsp;书店后台管理系统</h2>
        <div id="app">
            <form id="login" th:action="@{/admin/login}"  th:method="post" >
                <div class="mdui-textfield" style="width: 80%;margin: 0 auto;">
                    <i class="mdui-icon material-icons">account_circle</i>
                    <label class="mdui-textfield-label">账号</label>
                    <input class="mdui-textfield-input" type="text" id="username" name="username"/>
                </div>
                <div class="mdui-textfield mdui-textfield-floating-label" style="width: 80%;margin: 0 auto;">
                    <i class="mdui-icon material-icons">lock</i>
                    <label class="mdui-textfield-label" style="text-align: left;">密码</label>
                    <input class="mdui-textfield-input" type="password" id="password" name="password"/>
                </div>
                <br>
            </form>
            <!--点击此元素会自动激活验证码-->
            <!--id : 元素的id(必须)-->
            <!--data-appid : AppID(必须)-->
            <!--data-cbfn : 回调函数名(必须)-->
            <!--data-biz-state : 业务自定义透传参数(可选)-->
            <div id="control" style="text-align: center;margin-top: 10px;">
                <button id="TencentCaptcha" class="mdui-btn mdui-btn-raised mdui-ripple"
                        data-appid="2014195041" onclick="subForm()" style="width: 300px;">点击验证并登录系统</button>
            </div>
        </div>
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>
<script>
    function subForm(){
        var checkUserName = document.getElementById("username").value;
        var checkPassword = document.getElementById("password").value;
        if(checkUserName == ''){
            alert("请先输入用户名！");
        }else if(checkPassword == ''){
            alert("请输入密码！")
        }else{
            var captcha1 = new TencentCaptcha('2014195041', function(res) {
                if(res.ret === 0){
                    $.ajax({
                        type: "POST",
                        url: "/admin/check",
                        data: {
                            "ticket":res.ticket,
                            "randstr":res.randstr
                        },
                        success: function (data) {
                            if (data ===1) {
                                into();//验证成功，登录验证
                            }else{
                                alert("验证失败，请重新验证！");
                            }
                        }
                    })
                }else if(res.ret===2){
                    alert("验证已关闭，验证成功才能登录系统！");
                }
            });
            captcha1.show();
        }
    }
    function into() {
        $('#login').submit();//提交登录表单
    }
</script>
</body>
</html>